<!--
 * @Author: maomao
 * @Date: 2021-03-25 09:07:20
 * @Description: 
 * @FilePath: \his-dictionary-web\src\components\nav-drag.vue
-->
<template>
  <div>
    <DxSortable
      filter=".dx-tab"
      v-model:data="navigation"
      item-orientation="horizontal"
      drag-direction="horizontal"
      @drag-start="onTabDragStart($event)"
      @reorder="onTabDrop($event)"
    >
      <div style="display:flex">
        <DxTabPanel
          v-model:data-source="navigation"
          :defer-rendering="false"
          :show-nav-buttons="true"
          :repaint-changes-only="true"
          v-model:selected-index="selectedIndex"
          item-title-template="title"
      
        >
          <template #title="{ data: employee }">
            <div>
              <span>{{ employee.text }}</span
              ><i
                v-show="showCloseButton()"
                class="dx-icon dx-icon-close"
                @click="closeButtonHandler(employee)"
              />
            </div>
          </template>
        </DxTabPanel>
      </div>
    </DxSortable>
  </div>
</template>
<script lang="ts">
import DxSortable from "devextreme-vue/sortable";
import DxButton from "devextreme-vue/button";
import DxTabPanel from "devextreme-vue/tab-panel";
import { Options, Vue } from "vue-class-component";
import {navigationList} from '@/app-navigation';
@Options({
  components: {
    DxButton,
    DxTabPanel,
    DxSortable,
  },
})
export default class NavDrag extends Vue {
  selectedIndex = 0;
  navigation = navigationList;
  //disableButton() {}

  showCloseButton() {
    return this.navigation.length > 1;
  }
}
</script>